<template>
  <section class="works">
    <div class="left">
      <div class="content-item" v-for="(item, index) in activeData.leftData" :key="index">
        <span class="title">
          {{item.title}}
        </span>
        <span v-if="item.title.indexOf('地址') < 0" class="content">
          {{item.content}}
        </span>
        <span v-if="item.title.indexOf('地址') > 0" class="content">
          <a v-if="item.content.indexOf('http') >= 0" :href="item.content" target="_blank">{{item.content}}</a>
          <span v-else>{{item.content}}</span>
        </span>
      </div>
    </div>
    <div class="right">
      <div class="img-title">
        <img src="static/image/works/liulanqi.png" alt="">
      </div>
      <div class="images" ref="imgDiv">
        <img :src="activeImage" alt="">
      </div>
      <div class="pagination">
        <easyPagination :total="activeData.images && activeData.images.length" ref="easyPagination"></easyPagination>
      </div>
    </div>
  </section>
</template>
<script>
import easyPagination from '../../components/easyPagination'
export default {
  components: { easyPagination },
  data () {
    return {
      allData: {
        '华夏官网': {
          leftData: [
            {title: '华夏教育企业官网', content: '机构的官方网站。学生与家长可以在这里了解机构的教育资质，老师、活动等情况，也可以使用线上课程来在线学习。网页设计采用了简洁流畅的交互逻辑，时下流行的高饱度色系，再加上几何线条的元素给用户一种青春活力的感受，满足了机构的需求'},
            {title: '官方网站线上地址', content: 'http://www.huaxiak12.com'}
          ],
          images: ['static/image/works/huaxia/shouye.jpg', 'static/image/works/huaxia/kecheng.jpg', 'static/image/works/huaxia/shizi.jpg', 'static/image/works/huaxia/zhibo.jpg', 'static/image/works/huaxia/about.jpg']
        },
        '拳友官网': {
          leftData: [
            {title: '拳友酒魅官方网站', content: '企业门户网站，搭建了企业对外推送信息的平台，是企业品牌文化打造的重要环节。包含的主要页面有品牌文化、产品中心、联系我们。网站采用了和品牌文化所结合的水墨古风，主要使用了水墨画的山水，印章篆刻等等元素，和企业想传达的悠久文化相契合。满足了客户的需求。'},
            {title: '官方网站线上地址', content: '设计已经交付完毕，前端项目还在开发中。'}
          ],
          images: ['static/image/works/quanyou/shouye.jpg', 'static/image/works/quanyou/wenhua.jpg', 'static/image/works/quanyou/chanpinxiangqing.jpg', 'static/image/works/quanyou/dongtai.jpg', 'static/image/works/quanyou/chanpin.jpg', 'static/image/works/quanyou/about.jpg']
        },
        '哈云官网': {
          leftData: [
            {title: '哈云科技企业官网', content: '该项目为公司商业官方网站，向用户展示的主要页面有产品与应用场景、公办学校网校、机构网校、关于哈云。是公司对外展示主营业务、产品、企业动态的重要平台。网页整体偏向简约、商务、大气的设计风格。设计已经交付完毕，前端项目还在开发中。'},
            {title: '官方网站线上地址', content: '设计已经交付完毕，前端项目还在开发中。'}
          ],
          images: ['static/image/works/hayun/shouye.jpg', 'static/image/works/hayun/chanpin.jpg', 'static/image/works/hayun/wangxiao.jpg', 'static/image/works/hayun/xuexiao.jpg', 'static/image/works/hayun/guanyu.jpg']
        },
        '手机端': {
          leftData: [
            {title: '哈云课堂手机端', content: '该项目为公司课程网页的手机端。完善了用户线上浏览的方式。整体延展网页的板块规范，遵从手机端设计规范进行适配设计。参考哈云课堂网页版，优化手机端布局排版，设计。设计已经交付完毕，前端项目还在开发中。'},
            {title: '官方网站线上地址', content: 'https://www.hayun100.com/vip'}
          ],
          images: ['static/image/works/phone/shouye.jpg', 'static/image/works/phone/putongzhuangtai.jpg', 'static/image/works/phone/laoshixiangqing.jpg', 'static/image/works/phone/zhiboxiangqing.jpg']
        },
        '手绘': {
          leftData: [
            {title: '各种风格的手绘', content: '为了更加自由的实现自己的设计，不被资源和风格限制了思路和设计实现。于是开始自学手绘，临摹过各种各样的风格和作品。能够绘制一些简单的原创素材，在设计需要时可以作为补充和风格原型。完整的绘画作品较少，绘画水平和意识还在稳步提高。'},
          ],
          images: ['static/image/works/shouhui/huaban.jpg', 'static/image/works/shouhui/biaoqingbao.jpg', 'static/image/works/shouhui/shouhui2.jpg']
        }
      },
      activeData: {},
      activeImage: '',
      activeLabel: ''
    }
  },
  mounted() {
    this.activeLabel = this.$route.params.label || '华夏官网';
    this.activeData = this.allData[this.activeLabel];
    this.activeImage = this.activeData.images[0];
    this.$bus.on('worksMenuClick', label => {
      this.$refs.imgDiv && (this.$refs.imgDiv.scrollTop = 0);
      this.activeData = this.allData[label];
      this.activeImage = this.activeData.images[0];
      this.$store.dispatch('actionPageNumber', 1);
    });
  },
  methods: {
  },
  computed: {
    pageNumber() {
      return this.$store.state.pagination.pageNumber;
    }
  },
  watch: {
    pageNumber(val, oldVal) {
      this.activeImage = this.activeData.images[val -1];
      this.$refs.imgDiv.scrollTop = 0;
    }
  },
  beforeDestroy() {
    this.$bus.off('worksMenuClick');
  }
}
</script>
<style lang='less' scoped>
  .works {
    width: 100%;
    position: relative;
    display: flex;
    .left {
      width: 40%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .content-item {
        width: 60%;
        margin-top: 1.5rem;
        display: flex;
        flex-direction: column;
        .title {
          font-size: 2rem;
          font-family: PingFangSC-Semibold;
          font-weight: 600;
          color: rgba(51,51,51,1);
        }
        .content {
          margin-top: .8rem;
          font-size: 1.5rem;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: rgba(102,102,102,1);
        }
      }
    }
    .right {
      width: 60%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .img-title {
        width: 100%;
        margin-top: 8%;
        img {
          width: 100%;
          position: relative;
          top: .4rem;
        }
      }
      .images {
        width: 100%;
        height: 85%;
        overflow: auto;
        img {
          width: 100%;
        }
      }
      .pagination {
        margin-top: 1%;
      }
    }
  }
</style>
